<template>
  <div class="DevOpsOrder">
    <div class="cus-title">
      <h4>员工订单管理</h4>
    </div>
    <div class="keysearch">
      <el-form :model="BindForm">
        <el-form-item label="订单搜索:">
          <el-col :span="4">
            <el-select v-model="orderSearch" placeholder="手机号" clearable>
              <el-option value="0" label="手机号" />
              <el-option value="1" label="订单号" />
              <el-option value="2" label="员工姓名" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="BindForm.mobile"
              :placeholder="
                orderSearch == '0'
                  ? '手机号'
                  : orderSearch == '1'
                    ? '订单号'
                    : orderSearch == '2'
                      ? '员工姓名'
                      : ''
              "
            />
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="订单类型:">
          <el-col :span="4">
            <el-select
              style="z-index:1000"
              filterable
              placeholder="全部"
              clearable
              disabled
            >
              <el-option value="0" label="全部类型" />
              <el-option value="1" label="配货" />
              <el-option value="2" label="送货" />
              <el-option value="3" label="取货" />
              <el-option value="4" label="维护" />
            </el-select>
          </el-col>
          <el-form-item v-if="BindForm.state == '待结算'" label="商品类型:">
            <el-col :span="4">
              <el-select
                disabled
                filterable
                placeholder="全部"
              >
                <el-option value="1" label="共享租赁" />
                <el-option value="2" label="自助售货柜" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-form-item> -->

        <el-form-item label="门店:">
          <el-col :span="4">
            <el-select
              ref="province"
              v-model="BindForm.province"
              clearable
              filterable
              @change="handelProvince"
            >
              <el-option
                v-for="(item, index) in pca.province"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="BindForm.city"
              clearable
              filterable
              @change="handelCity"
            >
              <el-option
                v-for="(item, index) in pca.forCiry"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <store-select v-model="BindForm.storeId" />
          </el-col>
        </el-form-item>
        <el-form-item label="员工:">
          <el-col :span="4">
            <el-select
              v-model="BindForm.deliverManId"
              clearable
              filterable
              placeholder="全部"
            >
              <el-option
                v-for="(item, index) in userOption"
                :key="index"
                :value="item.id"
                :label="item.userName"
              />
            </el-select>
            <div class="cus-idv-btn">
              <el-button type="primary" @click="InitialInfo">筛选</el-button>
            </div>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div class="cus-key-type">
      <!-- <el-radio-button label="">全部订单</el-radio-button> -->
      <el-radio-group v-model="BindForm.sStat" @change="handelSend">
        <el-radio-button label="all">全部类型</el-radio-button>
        <el-radio-button label="1">待配货</el-radio-button>
        <el-radio-button label="2">待送货</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="BindForm.pickStat" @change="handelpickStat">
        <el-radio-button label="0">待取货</el-radio-button>
        <el-radio-button label="1">待维护</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="BindForm.isSettle" @change="handelisSettle">
        <el-radio-button label="0">待结算</el-radio-button>
        <el-radio-button label="1">已结算</el-radio-button>
      </el-radio-group>

      <!-- <el-radio-button label="">待审核</el-radio-button>
        <el-radio-button label="">审核通过</el-radio-button> -->
    </div>
    <div class="ele-table">
      <!-- <div v-if="BindForm.state == '待结算'">
        <el-button type="text">待审核</el-button>
        <el-button type="text"> 审核通过</el-button>
      </div> -->
      <table class="tableCustom">
        <thead>
          <tr>
            <td>商品</td>
            <td>配货</td>
            <td>送货</td>
            <td>取货</td>
            <td>维护</td>
            <td>订单状态</td>
          </tr>
        </thead>
        <tbody v-for="(inf, index) in Bindata" :key="index">
          <tr class="ele-tr-top">
            <td colspan="6" />
          </tr>
          <tr class="ele-tr-content">
            <td colspan="6" class="ele-td-first">
              <div>
                <p>
                  <span class="add-number">订单编号：{{ inf.orderCode }} </span>
                  &nbsp;&nbsp;&nbsp; &nbsp;
                  <span class="add-time">下单日期:
                    {{ inf.createTime }}</span>
                  <span>门店：{{ inf.storeName }}</span>
                </p>
                <el-button
                  type="text"
                  @click="routerOrderDetails(inf, index)"
                >查看详情</el-button>
              </div>
            </td>
          </tr>
          <!-- 要循环的区域 -->
          <tr
            v-for="(data, index1) in inf.goodsVoList"
            :key="index1"
            class="for-list"
          >
            <!-- 商品 -->
            <td>
              <div>
                <img :src="data.goodsDetail.goodsPic" alt="">
              </div>
              <div>
                <p>{{ data.goodsDetail.goodsName }}</p>
                <p class="textWorp">{{ data.goodsDetail.goodsSpec }}</p>
                <p>购买数量:{{ data.goodsDetail.number }}</p>
              </div>
            </td>
            <!-- 配货 -->
            <td>
              <p>{{ data.orderCostDistributionVo.username }}</p>
              <p>配货费用: {{ data.orderCostDistributionVo.fee }}</p>
            </td>
            <!-- 送货 -->
            <td>
              <p>{{ data.orderCostDeliverVo.username }}</p>
              <p>送货费用: {{ data.orderCostDeliverVo.fee }}</p>
            </td>
            <!--取货 -->
            <td>
              <p>{{ data.orderCostPickUpVo.username }}</p>
              <p>取货费用: {{ data.orderCostPickUpVo.fee }}</p>
            </td>

            <!-- 维护 -->
            <td>
              <p>{{ data.orderCostMaintainVo.username }}</p>
              <p>维护费用: {{ data.orderCostMaintainVo.fee }}</p>
            </td>
            <!-- 订单状态 -->
            <td>
              <p>
                <span v-if="data.orderStatus == '101'">待付款</span>
                <span v-if="data.orderStatus == '201'">待发货</span>
                <span v-if="data.orderStatus == '302'">待用户自提</span>
                <span v-if="data.orderStatus == '301'">待用户取货</span>
                <span v-if="data.orderStatus == '401'">使用中</span>
                <span v-if="data.orderStatus == '501'">待取货</span>
                <span v-if="data.orderStatus == '502'">待商户取货</span>
                <span v-if="data.orderStatus == '503'">待用户结算</span>
                <span v-if="data.orderStatus == '701'">已关闭</span>
                <span v-if="data.orderStatus == '801'">已完成</span>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <!--      <el-table v-loading="loading" :data="Bindata" stripe row-key="id" border>
        <el-table-column label="商品" width="300" class="box">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.goodsVoList"
              :key="index"
              class="mesSty"
            >
              <img class="imgSty" :src="item.goodsDetail.goodsPic" alt="错误">
              <div class="mesFont">
                <p>
                  {{ item.goodsDetail.goodsName }}
                </p>
                <p class="pb_sty">
                  <span>规格:{{ item.goodsDetail.goodsSpec }}</span>
                </p>
                <p>购买数量:{{ item.goodsDetail.number }}</p>
              </div>
            </div>
            &lt;!&ndash; 提示 &ndash;&gt;
            <div class="item">
              <span
                style="margin-left:1%"
              >订单编号：{{ scope.row.orderCode }}</span>
              <span class="hint_pr">下单日期：{{ scope.row.createTime }}</span>
              <span class="hint_pr">门店：{{ scope.row.storeName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="配货">
          <template scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <p>{{ item.orderCostDistributionVo.username }}</p>
              <p>
                配货费:{{ item.orderCostDistributionVo.fee }} -费用名称:{{
                  item.orderCostDistributionVo.feeName
                }}
              </p>
              &lt;!&ndash; <p style="color: rgba(29, 221, 71, 0.877);">审核通过</p> &ndash;&gt;
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" label="送货">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <p>{{ item.orderCostPickUpVo.username }}</p>
              <p>
                配货费:{{ item.orderCostPickUpVo.fee }} -费用名称:{{
                  item.orderCostPickUpVo.feeName
                }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" label="取货">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <p>{{ item.orderCostMaintainVo.username }}</p>
              <p>
                配货费:{{ item.orderCostMaintainVo.fee }} -费用名称:{{
                  item.orderCostMaintainVo.feeName
                }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" label="订单状态">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <span>{{ item.orderStat }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="$router.push({ name: '', params: { rows: scope.row } })"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>-->
    </div>
    <div class="pagination clearfix">
      <el-pagination
        class="float-right"
        :current-page="BindForm.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="BindForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
/** 运维订单 */
import { StaffMangeList } from '@/api/customAPI/shop/staffManage'
import { getCityList } from '@/api/auth'
import StoreSelect from '@/components/StoreSelect/index'
import { storeOrderAdminlist } from '@/api/customAPI/shop/store'
// import urbanLinkage from '@/components/Custom/urbanLinkage'
export default {
  name: 'DevOpsOrder',
  components: {
    StoreSelect
    // urbanLinkage
  },
  data() {
    return {
      // 配送区域
      pca: {
        // 省区
        province: [],
        // 需要循环遍历的城区和市区
        city: [],
        area: [],
        // 最后拿到的 城区和市区 select 列表
        forCiry: [],
        forArea: []
      },
      loading: false,
      orderSearch: '0',
      BindForm: {
        sStat: 'all',
        mobile: '',
        province: '',
        city: '',
        county: '',
        storeId: '',
        deliverManId: '',
        sendStat: '',
        pickStat: '',
        isSettle: '',
        pageNum: 1,
        pageSize: 10
      },
      pages: {
        total: 0
      },
      Bindata: [],
      userOption: []
    }
  },
  created() {
    getCityList()
      .then(result => {
        this.pca.province = []
        this.pca.city = []
        this.pca.area = []
        result.data.data.forEach(inf => {
          this.pca.province.push(inf.province)
          inf.cityRegion.forEach(reg => {
            this.pca.city.push(reg.city) // 拿市区
            reg.village.forEach(vil => {
              this.pca.area.push(vil) // 拿城区
            })
          })
        })
      })
      .catch(err => {
        console.log(err)
      })
  },
  mounted() {
    this.getUserList()
    this.InitialInfo()
  },
  activated() {
    this.InitialInfo()
  },
  methods: {
    handelisSettle() {
      this.BindForm.sStat = ''
      this.BindForm.pickStat = ''
      this.InitialInfo()
    },
    handelpickStat() {
      this.BindForm.isSettle = ''
      this.BindForm.sStat = ''
      this.InitialInfo()
    },
    handelSend(v) {
      if (v === 'all') {
        this.BindForm.sendStat = ''
      } else {
        this.BindForm.sendStat = v
      }
      this.BindForm.isSettle = ''
      this.BindForm.pickStat = ''
      this.InitialInfo()
    },
    /** 初始化 */
    InitialInfo() {
      console.log(this.BindForm)
      this.loading = true
      /** 运维订单列表获取 */
      const data = this.$XEUtils.clone(this.BindForm, true)
      delete data.sStat
      if (!data.mobile) {
        delete data.mobile
      }
      if (!data.province) {
        delete data.province
      }
      if (!data.city) {
        delete data.city
      }
      if (!data.county) {
        delete data.county
      }
      if (!data.storeId) {
        delete data.storeId
      }
      if (!data.deliverManId) {
        delete data.deliverManId
      }
      storeOrderAdminlist(data)
        .then(result => {
          console.log(result.data.data.data)
          this.Bindata = result.data.data.data
          this.pages.total = result.data.data.total
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.$message.warning(err)
        })
    },
    handleRadio(e) {
      console.log(e, this.BindForm.state)
      this.InitialInfo()
    },
    handleSizeChange(v) {
      this.BindForm.pageSize = v
      this.InitialInfo()
    },
    handleCurrentChange(v) {
      this.BindForm.pageNum = v
      this.InitialInfo()
    },
    /** 市 */
    handelCity(v) {
      this.BindForm.city = v
      this.pca.forArea = []
      this.pca.area.forEach(inf => {
        if (inf.pid === v) {
          this.pca.forArea.push(inf)
        }
      })
    },
    /** 省 */
    handelProvince(v) {
      this.BindForm.province = v
      this.pca.forCiry = []
      this.pca.forArea = []
      this.location = ''
      this.BindForm.city = ''
      this.pca.city.forEach(inf => {
        if (inf.pid === v) {
          this.pca.forCiry.push(inf)
        }
      })
    },
    /** 获取用户列表 */
    getUserList() {
      StaffMangeList({
        keySearch: '',
        page: 1,
        limit: 0
      }).then(inf => {
        console.log(inf.data.data)
        this.userOption = inf.data.data.list
      })
    },
    /** 查看详情*/
    routerOrderDetails(row, index) {
      switch (row.orderStatus) {
        //   "101">待付款
        case 101:
          this.$router.push({
            name: 'PendingPayment',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "201">待发货
        case 201:
          this.$router.push({
            name: 'Consignment',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "302">待用户自提
        case 302:
          this.$router.push({
            name: 'DYHZT',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "301">待用户收货
        case 301:
          this.$router.push({
            name: 'DYHSH',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "401">使用中
        case 401:
          this.$router.push({
            name: 'SYZ',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "501">待取货
        case 501:
          this.$router.push({
            name: 'DQH',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "502">待商户收货
        case 502:
          this.$router.push({
            name: 'DSHSH',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "503">待用户结算
        case 503:
          this.$router.push({
            name: 'DJS',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "701">已关闭
        case 701:
          this.$router.push({
            name: 'closed',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
        //   "801">已完成
        case 801:
          this.$router.push({
            name: 'YWC',
            query: {
              p: this.$ed({
                rows: row,
                status: row.orderStatus
              })
            }
          })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.DevOpsOrder {
  padding: 50px 100px;
  .keysearch {
    ::v-deep.el-form {
      .el-form-item__label {
        width: 100px;
        text-align: start;
      }
      .el-form-item {
        .cus-idv-btn {
          margin-top: 40px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
  }
  /*.ele-table {
    margin-top: 40px;
    .el-table--enable-row-transition >>> .el-table__body td {
      padding-top: 2%;
    }
    ::v-deep .el-table tr {
      position: relative;
      width: 100%;
    }
    ::v-deep .cell {
      padding-top: 3%;
    }
    .item {
      width: 115.5em;
      background: #eee;
      padding: 1% 0;
      position: absolute;
      top: 0;
      left: -120px;
      z-index: 1;
      padding-left: 20px;
    }

    .hint_pr {
      padding-left: 10vh;
    }
    .imgSty {
      width: 80px;
      display: block;
    }
    .div-baoguo {
      background: #11a4c9;
      color: white;
      border-radius: 5px;
      text-align: center;
    }
    .mesSty {
      display: flex;
      align-items: center;
    }
    .pb_sty span {
      font-size: 12px;
      color: gray;
    }

    .mesFont p {
      margin-block-start: 0;
      margin-block-end: 0;
    }
    .mesFont p:first-child {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .iconSty {
      float: right;
      cursor: pointer;
    }
  }*/
  .tableCustom {
    width: 100%;
    border: 1px solid #f3f3f3;
    border-collapse: collapse;
    max-height: 550px;
    tr {
      td {
        border: 1px solid #f3f3f3;
      }
    }
    thead {
      background: #f3f3f3;
      td {
        height: 50px;
        border: none;
      }
      td:first-child {
        width: 30%;
      }
    }
    .ele-tr-top {
      height: 34px;
    }
    tbody {
      .ele-tr-content {
        background: #f3f3f3;
        .ele-td-first {
          div {
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            padding: 0px 4% 0px 1%;
            p {
              .add-time {
                font-size: 14px;
                color: gray;
              }
              .add-number {
                color: gray;
              }
            }
          }
        }
      }
      .for-list {
        td:first-child {
          border: none;
          border-bottom: 1px solid #f3f3f3;
          padding-left: 2.5%;
          div {
            float: left;
          }
          div:first-child {
            width: 120px;
            height: 120px;
            padding: 15px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          div:last-child {
            margin-top: 10px;
            font-size: 13px;
            p:nth-child(2) {
              color: gray;
            }
          }
        }
        .baojia > ul {
          height: 100%;
          padding: 0px;
          list-style-type: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          li {
            padding: 5px 0px;
          }
          .dazhe {
            width: 50%;
            display: flex;
            justify-content: space-around;
          }
          .shuliang {
            font-size: 13px;
            color: gray;
          }
        }
        .ele-td-border {
          border-top: none;
          border-bottom: none;
        }
        .textWorp {
          width: 250px;
        }
      }
    }
  }
  .float-right {
    float: right;
  }
  .pagination {
    margin: 50px 0px;
  }
  .clearfix:after {
    content: '020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    zoom: 1;
  }
}
</style>
